---
layout: default
---

{% include values_docs.inc %}

{% assign documents = site.pages | where_exp: 'page', 'page.url contains currentProjectVersionPath' | sort: 'weight' %}

<section class="docs-header">
  <h1>Documentation</h1>
  <div class="versions">
    <a role="button" href="javascript:void(0)">Rook version {{ currentVersion }}</a>
    <div class="versions-dropdown-content">
      {% for ver in project.versions %}
        <a href="{{ ver.path | append: currentPath | relative_url }}"{% if ver.version == currentVersion %} class="active"{% endif %}>Rook version {{ ver.version }}</a>
      {% endfor %}
    </div>
    <img src="{{ "/images/arrow.svg" | relative_url }}" />
  </div>
</section>
<div class="page">
  <div class="docs-menu">
      <ul id="docs-ul"></ul>
  </div>
  <div class="docs-content">
    <div class="docs-actions">
      <a id="edit" href="{{ page.github }}{{ page.name }}">Edit on GitHub</a>
    </div>
    {% if currentVersion == "master" %}
      <div class="alert master">
        <p><b>PLEASE NOTE</b>: This document applies to an <b>unreleased</b> version of Rook. It is strongly recommended that you only use official releases of Rook, as unreleased versions are subject to changes and incompatibilities that will not be supported in the official releases.</p>
        <p>If you are using an official release version of Rook, you should refer to the documentation for your specific version.</p>
        <strong>Documentation for other releases can be found by using the version selector in the bottom left of any doc page.</strong>
      </div>
    {% elsif currentVersion != latestVersion %}
      <div class="alert old">
        <p><b>PLEASE NOTE</b>: This document applies to {{ currentVersion }} version and not to the latest <strong>stable</strong> release {{ latestVersion }}</p>
        <strong>Documentation for other releases can be found by using the version selector in the left bottom of any doc page.</strong>
      </div>
    {% endif %}
    <div class="docs-text">
      {{ content }}
    </div>
  </div>
</div>

<script>
  var menu = [];
  var BASE_PATH = {{ '' | relative_url | jsonify }};

  function add(name, url, isChild, current) {
    var item = { name: name, url: url, current: current };
    var container = menu;
    if (isChild && menu.length > 0) {
      menu[menu.length-1].children = menu[menu.length-1].children || [];
      container = menu[menu.length-1].children;
      if (current) {
        menu[menu.length-1].childCurrent = true;
      }
    }
    container.push(item);
  }

  {% for document in documents %}
    add(
      {{ document.title | jsonify }},
      {{ document.url | relative_url | jsonify }},
      {% if document.indent == true %}true{% else %}false{% endif %},
      {% if document.url == page.url %}true{% else %}false{% endif %}
    );
  {% endfor %}

  function getEntry(item) {
    var itemDom = document.createElement('li');

    if (item.current) {
      itemDom.innerHTML = item.name;
      itemDom.classList.add('current');
    } else {
      itemDom.innerHTML = '<a href="' + item.url + '">' + item.name + '</a>';
    }

    return itemDom;
  }

  // Flush css changes as explained in: https://stackoverflow.com/a/34726346
  // and more completely: https://stackoverflow.com/a/6956049
  function flushCss(element) {
    element.offsetHeight;
  }

  function addArrow(itemDom) {
    var MAIN_ITEM_HEIGHT = 24;
    var BOTTOM_PADDING = 20;
    var arrowDom = document.createElement('a');
    arrowDom.classList.add('arrow');
    arrowDom.innerHTML = '<img src="' + BASE_PATH + '/images/arrow.svg" />';
    arrowDom.onclick = function(itemDom) {
      return function () {
        // Calculated full height of the opened list
        var fullHeight = MAIN_ITEM_HEIGHT + BOTTOM_PADDING + itemDom.lastChild.clientHeight + 'px';

        itemDom.classList.toggle('open');

        if (itemDom.classList.contains('open')) {
          itemDom.style.height = fullHeight;
        } else {
          // If the list height is auto we have to set it to fullHeight
          // without tranistion before we shrink it to collapsed height
          if (itemDom.style.height === 'auto') {
            itemDom.style.transition = 'none';
            itemDom.style.height = fullHeight;
            flushCss(itemDom);
            itemDom.style.transition = '';
          }
          itemDom.style.height = MAIN_ITEM_HEIGHT + 'px';
        }

        return false;
      };
    }(itemDom);
    itemDom.appendChild(arrowDom);

    if ((item.current && item.children) || item.childCurrent) {
      itemDom.classList.add('open');
      itemDom.style.height = 'auto';
    } else {
      itemDom.style.height = MAIN_ITEM_HEIGHT + 'px';
    }
  }

  var menuDom = document.getElementById('docs-ul');
  for (var i = 0; i < menu.length; i++) {
    var item = menu[i];
    var itemDom = getEntry(item);

    if (item.childCurrent) {
      itemDom.classList.add('childCurrent');
    }

    if (item.children) {
      addArrow(itemDom);
      itemDom.classList.add('children');
      var children = document.createElement('ul');
      for (var j = 0; j < item.children.length; j++) {
        children.appendChild(getEntry(item.children[j]));
      }
      itemDom.appendChild(children);
    }
    menuDom.appendChild(itemDom);
  }
</script>
